<template>
    <div class="glass-hover-container">
        <div class="glass-hover-box" :style="{ 'width': boxWidth }">
            <div class="glass-hover-marker" :style="{ '--bgColor': bgColor, 'left': markerLeft }"></div>
            <div class="glass-hover-content">
                <button :class="i === lastIndex ? activeItemClass : itemClass" v-for="(item, i) in buttonList"
                    @click="emitButton(item.param, i)" :title="item.title" v-html="item.svg"></button>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: "GlassHover",
    props: ["buttons"],
    emits: ["buttonDown"],
    components: {},
    data() {
        return {
            lastIndex: 0,
            boxWidth: "60px",
            markerLeft: "40px",
            marker: null,
            list: null,
            bgColor: "#5da6ff",
            itemClass: "glass-hover-item",
            activeItemClass: "glass-hover-item glass-hover-active",
            buttonList: [
                {
                    bgColor: "#5da6ff",
                    title: "图标",
                    param: "showIcon",
                    svg: `<svg viewBox="0 0 50 50" stroke="white"
    fill="transparent"
    stroke-width="2px"
    stroke-dasharray="40, 10">
    <path d="M25,40 C45,30 45,27 45,20 C45,10 25,10 25,20 C25,10 5,10 5,20 C5,27 5,30 25,40 Z" />
</svg>`,
                },
                {
                    bgColor: "#ff0",
                    title: "图标",
                    param: "showIcon",
                    svg: `<svg viewBox="0 0 50 50" stroke="white"
    fill="transparent"
    stroke-width="2px"
    stroke-dasharray="40, 10">
    <rect x="15" y="10" width="20" height="5" />
    <rect x="20" y="15" width="10" height="10" />
    <rect x="10" y="25" width="30" height="15" />
</svg>`,
                },
                {
                    bgColor: "#df2fff",
                    title: "图标",
                    param: "showIcon",
                    svg: `<svg viewBox="0 0 50 50" stroke="white"
    fill="transparent"
    stroke-width="2px"
    stroke-dasharray="40, 10">
    <circle cx="25" cy="25" r="15" />
    <circle cx="30" cy="20" r="8" />
    <circle cx="12" cy="38" r="4" />
</svg>`,
                },
                {
                    bgColor: "#ff308f",
                    title: "图标",
                    param: "showIcon",
                    svg: `<svg viewBox="0 0 50 50" stroke="white"
    fill="transparent"
    stroke-width="2px"
    stroke-dasharray="40, 10">
    <path d="M10,10 h30 v30 H10 V40 Z" />
    <path d="M10,20 h30" />
    <path d="M20,20 v20" />
</svg>`,
                }
            ],
        }
    },
    computed: {},
    methods: {
        emitButton(param, index) {
            this.markerLeft = 30 + 10 + (60 + 20) * index + "px";
            this.lastIndex = index;
            this.bgColor = this.buttonList[index].bgColor;
            this.$emit("buttonDown", param);
        },
        //初始化按钮栏
        initBar(buttonList) {
            this.boxWidth = 60 + 80 * buttonList.length + "px";
            this.lastIndex = 0;
            this.markerLeft = 30 + 10 + (60 + 20) * 0 + "px";
        }
    },
    created() {
        if (this.$props.buttons) {
            this.buttonList = this.$props.buttons;
        }
        this.initBar(this.buttonList);
    },
    mounted() {
    },
    beforeUnmount() {
    },
}
</script>

<style scoped>
.glass-hover-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.glass-hover-box {
    position: relative;
    height: 80px;
}

.glass-hover-marker {
    position: absolute;
    top: -10px;
    transition: 0.5s;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: var(--bgColor);
    box-shadow: 0 0 15px var(--bgColor),
        0 0 30px var(--bgColor),
        0 0 45px var(--bgColor),
        0 0 60px var(--bgColor);
}

.glass-hover-content {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
}

.glass-hover-item {
    position: relative;
    width: 60px;
    height: 60px;
    user-select: none;
    cursor: pointer;
    background-color: transparent;
    transition: 0.25s;
    margin: 0 10px;
    padding: 0;
    border: 0;
    opacity: 0.25;
}

.glass-hover-active {
    opacity: 1;
}
</style>
